<script setup>
import Title from "./Title.vue";
import Table from "./Table.vue";
import { onMounted, ref } from "vue";

const tableData1 = ref([
  {
    title: "第一阶段",
    class:
      "高等数学、大学英语、管理学、经济学、C语言程序设计、Java面向对象程序设计、数据库原理与应用等",
  },
  {
    title: "第二阶段",
    class:
      "大学英语、数据结构、信息资源管理、线性代数、概率论与数理统计、通信与计算机网络等",
  },
  {
    title: "第三阶段",
    class: "应用统计学、运筹学、UML面向对象分析与设计、系统工程等",
  },
  {
    title: "第四阶段",
    class: "智能决策综合实践、创新创业实践、毕业论文/设计等",
  },
]);
const tableData2 = ref([
  {
    title: "第一阶段",
    class: "高等数学、大学英语、管理学、Python程序设计、数据库原理与应用等",
  },
  {
    title: "第二阶段",
    class:
      "大学英语、概率论与数理统计、线性代数、经济学、大数据原理与应用、大数据治理与商业模式、数据结构与算法设计、商务智能与数据挖掘等",
  },
  {
    title: "第三阶段",
    class: "运筹学、模式识别与机器学习、大数据统计与计量分析等",
  },
  { title: "第四阶段", class: "创新创业实践、毕业论文/设计等" },
]);

onMounted(() => {
  var backgroundHeight = document.getElementById("textBox").offsetHeight;
  document.getElementById("backgroundBox").style.height =
    backgroundHeight + "px";
  document.getElementById("firstBox").style.height =
    backgroundHeight + 140 + "px";
});
</script>
<template>
  <div class="intro-box">
    <div class="first-box" id="firstBox">
      <Title title="院系简介"></Title>
      <div class="background-box" id="backgroundBox"></div>
      <div class="text-box" id="textBox">
        <div class="text">
          信息管理与信息系统秉承信息技术与管理融合原则，强化数据分析与决策能力，为广东省乃至泛珠三角地区培养掌握人工智能、大数据时代信息组织运作规律、应用信息技术提升组织运作效率、具有创新思维的应用型人才。
        </div>
        <div class="text">
          大数据管理与应用专业主要融合管理学、统计学、计算机科学与技术、以及其他具体实践领域的学科知识，为农业、工商业、企业及政府部门等应用领域，培养大数据分析、大数据治理和辅助管理决策的复合创新应用型人才。
        </div>
      </div>
    </div>
    <div class="second-box">
      <Title title="课程体系"></Title>
      <Table title="信息管理与信息系统专业" :tableData="tableData1"></Table>
      <Table title="大数据管理与应用专业" :tableData="tableData2"></Table>
    </div>
    <div class="third-box">
      <Title title="组织架构"></Title>
      <img src="../../assets/images/intro_zzjg.png">
    </div>
  </div>
</template>
<style lang="less" scoped>
.intro-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}
.first-box {
  width: 100%;
  .background-box,
  .text-box {
    width: 75%;
    box-sizing: border-box;
    padding: 35px;
    background-color: white;
    border: 1px solid rgba(15, 81, 146, 0.1);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 20px;
    .text {
      text-indent: 2em;
      margin-bottom: 10px;
    }
  }
  .background-box {
    position: relative;
    left: 50%;
    transform: translate(-51%, 0%);
  }
  .text-box {
    position: relative;
    left: 50%;
    transform: translate(-50%, -92%);
  }
}
.second-box {
  width: 100%;
}
.third-box {
  width: 100%;
  img{
    width:800px;
    position: relative;
    left:50%;
    transform: translate(-50%,0);
    margin-bottom:20px;
  }
}
</style>
